import React, { useState } from 'react';
import ReactDOM from 'react-dom';
/* 
  自定义hook 就是一个普通函数 但是要求 函数名必须是use开头
  一般是用来抽离复用性的逻辑
*/
function useCount(n, step = 10, max = 150) {
  let [count, setCount] = useState(n)
  function add() {
    setTimeout(() => {
      if (count + step > max) {
        console.log("不能再加了")
      } else {
        setCount(count + 10)
      }
    }, 1000);
  }
  return [count, add]
}

function App() {
  let [count, add] = useCount(100)
  return <>
    <h1>hello{count}</h1>
    <button onClick={add}>+</button>
  </>
}
function App2() {
  let [count, add] = useCount(1000, 200, 2000)
  return <>
    <h1>hello{count}</h1>
    <button onClick={add}>+</button>
  </>
}
function App3() {
  let [count, add] = useCount(10, 20, 100)
  return <>
    <h1>hello{count}</h1>
    <button onClick={add}>+</button>
  </>
}
function qq(fn) {
  return fn(400)
}
function App4() {
  let [count, setC] = qq(useState)
  return <>
    <h2 onClick={() => { setC(600) }}>{count}</h2>
  </>
}

ReactDOM.render(<>
  <App />
  <App2 />
  <App3 />
  <App4 />
</>, document.getElementById('root'))